<template>
  <div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :immediate-check="false"
        @load="onLoad"
      >
        <article-item
          v-for="obj in articleList"
          :key="obj.art_id"
          :artObj="obj"
        >
        </article-item>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
// 目标: 文章列表铺设
// 1. 找到接口, 写api/index.js->接口方法
// 2. ArticleList引入, 发起文章列表请求拿到数据
// 3. v-for遍历article-item, 传入数据对象展示数据

// 目标: 底部加载更多组件 (van-list)
// 重要1: 当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true
// 重要2: finished: 加载完成，加载完成后不再触发load事件
// 重要3: 初始化的时候, 就判定是否触底(数据是网络请求回来的-异步, 默认触发load一次)
// 重要4: 数据加载完毕, loading: false(保证下次触底还能执行load事件)
//

// 目标: 触底, 在发请求, 拿到下一页数据
// 1. 接口文档: 发现需要传递timestamp时间戳
// 下一页数据需要传递上一次接口返回的pre_timestamp的时间值
// 2. data函数里nextTime, 专门用于保存紧挨着的上一次的pre_timestamp的值
// 3. onLoad触底加载更多事件方法中, 把nextTime传入API接口方法内
// 4. 修改api/index.js相应接口, 接收timestamp值(不能固定的)

import ArticleItem from './component/ArticleItem.vue'
import { getArticleListAPI } from '@/api'
export default {
  components: {
    ArticleItem
  },
  data () {
    return {
      articleList: [],
      list: [],
      loading: false,
      finished: false,
      nextTime: new Date(), // 下一页的文章数据-开头文章的发布时间
      refreshing: false
    }
  },
  methods: {
    // 底部加载
    async onLoad () {
      // 异步更新数据
      // const res = await getArticleListAPI({
      //   channel_id: this.channelId,
      //   timestamp: this.nextTime
      // })
      // if (res.data.data && res.data.data.results && res.data.data.results.length === 0) {
      //   this.finished = true
      // }
      // this.articleList = [...this.articleList, ...res.data.data.results]
      // this.loading = false
      if (this.articleList.length > 0) {
        this.getArticleListFn()
      }
    },
    // 获取文章列表
    async getArticleListFn () {
      const res = await getArticleListAPI({
        channel_id: this.channelId,
        timestamp: this.nextTime
      })
      // if (res.data?.data?.results?.length === 0) {
      //   // 本次加载更多就无数据
      //   this.finished = true
      // }
      this.articleList = [...this.articleList, ...res.data.data.results]
      if (res.data?.data?.pre_timestamp === null) {
        this.finished = true
        this.nextTime = null
      } else {
        this.nextTime = res.data.data.pre_timestamp
      }

      this.loading = false // 本次加载完毕(这样下次触底, 才能再出发load事件和onLoad方法)
      setTimeout(() => {
        this.refreshing = false // 刷新完毕
      }, 1000)
    },
    // 下拉刷新
    onRefresh () {
      this.articleList = []
      this.nextTime = new Date()
      this.getArticleListFn()
    }
  },
  props: {
    channelId: Number
  },
  created () {
    this.getArticleListFn()
  }
}
</script>

<style>
</style>
